<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发布需求-闲时网</title>

    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <style>
        * {
            box-sizing: border-box;

        }

        body {
            font-family: Arial;
            padding: 10px;
            background: #f1f1f1;
        }

        /* 头部标题 */
        .header {
            height: 100px;
            background: #F5F5F5;
            padding: 30px;
        }

        /* 导航条 */
        .topnav {
            overflow: hidden;
            background-color: #333;
        }

        /* 导航条链接 */
        .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }

        /* 链接颜色修改 */
        .topnav a:hover {
            background-color: #ddd;
            color: black;
        }

        /* 创建两列 */
        /* Left column */
        .leftcolumn {
            padding: 40px;
            float: left;
            width: 75%;
        }

        /* 右侧栏 */
        .rightcolumn {
            padding: 40px;
            float: left;
            width: 25%;
            background-color: #f1f1f1;
            padding-left: 20px;
        }

        /* 图像部分 */
        .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
        }

        /* 文章卡片效果 */
        .card {
            background-color: white;
            padding: 20px;
            margin-top: 20px;
        }

        /* 列后面清除浮动 */
        .row:after {
            content: "";
            display: table;
            clear: both;
        }

        /* 底部 */
        .footer {

            text-align: center;
            background: #ddd;
            margin-top: 20px;
        }

        /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
        @media screen and (max-width: 800px) {

            .leftcolumn,
            .rightcolumn {
                width: 100%;
                padding: 0;
            }
        }

        /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
        @media screen and (max-width: 400px) {
            .topnav a {
                float: none;
                width: 100%;
            }
        }

        select {
            width: auto;
            padding: 10px 10px;
            margin: 10px;
        }

        option {
            font-size: 18px;
            text-align: center;
        }

        .service_detailed input {
            width: 500px;
            height: 40px;
            /* border: 1px solid #30261E;
            box-shadow: 2px 2px 5px #000 inset; */
        }

        .content-two-list {
            padding: 0px 0px 20px;
        }

        .card {
            border: 1px solid rgb(194, 194, 194);
            padding: 40px;
        }








        ul,
        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        a:hover {
            cursor: pointer;
            text-decoration: none;
        }

        a:link {
            text-decoration: none;
        }

        img {
            vertical-align: middle;
        }

        .btn-numbox {
            overflow: hidden;
            margin-top: 20px;
        }

        .btn-numbox li {
            float: left;
        }

        .btn-numbox li .number,
        .kucun {
            display: inline-block;
            font-size: 12px;
            color: #808080;
            vertical-align: sub;
        }

        .btn-numbox .count {
            overflow: hidden;
            margin: 0 16px 0 -20px;
        }

        .btn-numbox .count .num-jian,
        .input-num,
        .num-jia {
            display: inline-block;
            width: 28px;
            height: 28px;
            line-height: 28px;
            text-align: center;
            font-size: 18px;
            color: #999;
            cursor: pointer;
            border: 1px solid #e6e6e6;
        }

        .btn-numbox .count .input-num {
            width: 58px;
            height: 26px;
            color: #333;
            border-left: 0;
            border-right: 0;
        }

        .release {
            margin-top: 10px;
            border: 2px solid rgb(168, 171, 173);
            padding: 40px;
            background-color: #fff;
        }

        .ser-btn {
            width: 216px;
            height: 40px;
            font-size: 14px;
            margin-bottom: 20px;
            display: block;
        }

        .btn-release {
            width: 60%;
            height: 60%;
            border-radius: 8px;
            background-color: #0D95F5;
            color: #fff;
            border: 1px solid #008ff4;
        }

        .btn-save {
            width: 60%;
            height: 60%;
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #008ff4;
        }

        #forth {
            /* border: 1px solid red; */
            height: 200px;

            background-color: black;
        }

        #forth-left {
            width: 300px;
            /* border: 1px solid blue; */
            margin-left: 150px;
            padding: 50px;
            float: left;
        }

        #forth-left-p {
            font-size: 30px;
            color: rgb(164, 164, 168);

        }

        #forth-middle {
            width: 600px;
            /* border: 1px solid black; */

            float: left;
        }

        #forth-middle li {
            list-style: none;

        }

        #forth-middle ul {
            padding: 0;
        }

        #forth-middle a {
            text-decoration: none;
            color: white;
            display: block;
        }

        #forth-middle>ul {
            padding: 35px;
            float: left;
        }

        #forth-right {

            width: 400px;
            /* border: 1px solid red; */
            float: left;
        }

        .form-control {
            width: 50px;
        }

        .form-group {

            padding-top: 20px;
        }

        #three {
            width: 200px;
        }

        #leixing {
            width: 200px;
        }
    </style>
    <link href="../../css/service/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="../../css/service/sweetalert.css" rel="stylesheet">





</head>

<body onload="initData()">
    <div class="header">
        <!-- 导航栏 -->
        <div class="logo">
            <a href="../../index.html"><img src="../imgs/logo.png" /></a>发布需求
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="leftcolumn">
                <div class="card">
                    <h4>1 . 选择需求分类</h4>
                    <div>
                        <select id="need" onchange="changeNeed(this)">
                            <option value="-1">---请您选择需求类型---</option>
                        </select>

                        <select id="work">
                            <option value="-1">---请您选择具体需求---</option>
                        </select>

                    </div>


                    <h4 >2 . 填写需求描述和联系方式</h4>


                    <div>
                        <label for="servTitle" >来个醒目的描述吸引服务者</label>

                        <div class="service_detailed">
                            <input type="text" class="form-control" style=" border-radius: 5px" name=""
                                class="HUI_Inputs" placeholder="请简单介绍一下您的需求"  />
                        </div>
                    </div>
                    <div id="picture">

                        图片区

                    </div>
                    <div class="form-group">
                        <input type="file" id="file" accept="image/jpg,image/jpeg,image/png,image/PNG">
                    </div>
                    <div id="file">

                        文件区

                    </div>
                    <div class="form-group">
                        <input type="file" name="">上传文件</input>
                    </div>




                    <h4 >您的详细地址</h4>
                    <form class="form-inline">
                        <div data-toggle="distpicker">
                            <div class="form-group">
                                <label class="sr-only" for="province1">Province</label>
                                <select class="form-control" id="province1"></select>
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="city1">City</label>
                                <select class="form-control" id="city1"></select>
                            </div>
                            <div class="form-group">
                                <label class="sr-only" for="district1">District</label>
                                <select class="form-control" id="district1"></select>
                            </div>
                        </div>
                    </form>

                    <div class="content-two-list">
                        <h4>手机号码</h4>
                        <div id="leixing">
                            <input type="text" class="form-control" style=" border-radius: 5px;" id="cellPhone"
                                name="cellPhone" value="">
                        </div>
                    </div>
                    <div class="content-two-list">
                        <h4>QQ号码</h4>
                        <div id="leixing">
                            <input type="text" class="form-control" style=" border-radius: 5px" id="qqCode"
                                name="qqCode" value="">
                        </div>
                    </div>



                    <h4 >3 . 设置价格、人数和报名截止时间</h4>


                    <div id="three">
                        <div class="form-group">
                            <label>设置价格：</label>
                            <div>
                                <input type="text" name="" class="form-control" placeholder="请输入价格/元">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">设置人数：</label>
                            <div>
                                <input type="text" name="" class="form-control" placeholder="请输入人数,不超过5人">
                            </div>
                        </div>


                        <div class="form-group">
                            <label class=" control-label">报名日期：</label>
                            <div>
                                <select class="form-control" name="">
                                    <option>请选择天数/天</option>
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    <option>6</option>
                                    <option>7</option>
                                    <option>8</option>
                                    <option>9</option>
                                    <option>10</option>
                                    <option>11</option>
                                    <option>12</option>
                                    <option>13</option>
                                    <option>14</option>
                                    <option>15</option>
                                    <option>20</option>
                                    <option>30</option>
                                </select>
                            </div>
                        </div>
                    </div>



                </div>
                <div class="card" >
                    <h4>4 . 选择增值服务加快需求的完成</h4>
                    <label><input id="Aaa" type="checkbox" class="xi">把您的需求短信推送给更多的符合的服务者！</label>

                    <ul class="btn-numbox">
                        <li><span class="number">人数</span></li>
                        <li>
                            <ul class="count">
                                <li><span id="num-jian" class="num-jian">-</span></li>
                                <li><input type="text" class="input-num" id="input-num" value="0" /></li>
                                <li><span id="num-jia" class="num-jia">+</span></li>
                            </ul>
                        </li>
                        　　
                    </ul>


                </div>
            </div>
            <div class="rightcolumn">
                <div class="card">
                    <h4 > 需求注意事项: </h4>
                    <div style="height:500px;">
                        <ul >
                            <p>1、根据国家广告法新规，标题请不要使用不实虚假夸大的描述，如：国家级、最好、全网最低、第一、独家等限制级词语。</p>
                            <p>2、服务的封面图片和详情中请不要使用存在侵权的字体和图片，如有侵权行为，平台将下架该服务。</p>
                            <p>3、双方达成协议后，服务商在完成时间后7天内不提交验收，默认放弃服务，托管金额将全额返还给需求者。</p>
                            <p>4、交易全程零佣金，但依法纳税是每个公民的义务，平台将从每笔订单收入中扣除相应的综合服务税费，以帮个体开票给到需求方。</p>
                        </ul>

                    </div>
                </div>
                <div class="card">

                    <div>
                        <div style="border-top: 1px dashed #e2e2e2; ">
                            <span style="font-size: 18px;
                                line-height: 25px;
                                padding: 25px 0px 25px;
                                text-align: center;
                                display: block;">发布有疑问？客服来帮忙！</span>
                        </div>
                        <a href="#" style="border: 2px solid rgb(170, 174, 177);
                                border-radius: 20px;
                                width: 140px;
                                height: 40px;
                                font-size: 14px;
                                color: #008FF4;
                                
                                text-align: center;
                                display: block;
                                margin: 0 auto;
                                line-height: 40px;">QQ在线联系</a>
                        <span style="color: #999999;
                                text-align: center;
                                display: block;
                                padding: 9px 0 14px;
                                line-height: 17px;">周一至周五9:00~18:00</span>
                        <span style="font-size: 20px;
                                color: #008FF4;
                                letter-spacing: 0;
                                text-align: center;
                                display: block;
                                line-height: 28px;">400-180-8321</span>
                        <span style="color: #999999;
                                text-align: center;
                                display: block;
                                padding: 9px 0 14px;
                                line-height: 17px;">周一至周日9:00~21:00</span>
                    </div>
                    <div class="release">
                        <h4 style="padding-bottom: 25px;">发布</h4>
                        <a href="javascript:void(0)" class="ser-btn">
                            <button class="btn btn-success btn-sm demo1">保存草稿</button>
                        </a>
                        <a href="javascript:void(0)" class="ser-btn">
                            <button class="btn btn-success btn-sm demo2">确认发布</button>
                        </a>
                    </div>
                </div>


            </div>
        </div>
    </div>
    </div>

    <div class="footer">
        <div id="forth">
            <!-- 左边 -->
            <div id="forth-left">
                <h5 style="color: #ccc">闲时网客服热线</h5>
                <p id="forth-left-p">400-180-8321</p>
                <p style="color: white">每天09: 00~21: 00</p>
            </div>
            <!-- 中间 -->
            <div id="forth-middle">
                <ul>
                    <li style="color: #ccc">闲时网
                        <ul>
                            <li style="margin-top: 20px"><a href="#">关于我们</a></li>
                            <li style="margin-top: 12px"><a href="#">联系我们</a></li>
                            <li style="margin-top: 12px"><a href="#">加入我们</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li style="color: #ccc">帮助中心
                        <ul>
                            <li style="margin-top: 20px"><a href="#">交易规则</a></li>
                            <li style="margin-top: 12px"><a href="#">法律声明</a></li>
                            <li style="margin-top: 12px"><a href="#">常见问题</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li style="color: #ccc">我是需求方
                        <ul>
                            <li style="margin-top: 20px"><a href="#">发布需求</a></li>
                            <li style="margin-top: 12px"><a href="#">要选服务对象</a></li>
                            <li style="margin-top: 12px"><a href="#">需求方入门</a></li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li style="color: #ccc">我是服务方
                        <ul>
                            <li style="margin-top: 20px"><a href="#">服务方入驻</a></li>
                            <li style="margin-top: 12px"><a href="#">浏览全部需求</a></li>
                            <li style="margin-top: 12px"><a href="#">服务方入门</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <!-- 右边  -->
            <div id="forth-right">
                <p style="margin-top: 30px;color: #ccc">联系关注我们呗</p>
                <p style="margin-top: 20px"><a href="#"><img src="../../imgs/QQ图片20190913162259.png" alt="图片加载失败!"></a>
                    <a href="#"><img src="../../imgs/QQ图片20190913162435.png" alt="图片加载失败!"></a>
                    <a href="#"><img src="../../imgs/QQ图片20190913162519.png" alt="图片加载失败!"></a>
                    <a href="#"><img src="../../imgs/QQ图片20190913162606.png" alt="图片加载失败!"></a>
                </p>
            </div>
        </div>
    </div>


    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <!-- 自定义js -->
    <script src="../../js/service/content.js?v=1.0.0"></script>

    <!-- 选择服务类别-->
    <script>
        var need = ["老人", "小孩", "其他"];
        var works = [["谈心，拉家常", "散心，做运动", "照顾老人生活琐事", "其他，需要备注"],
        ["陪孩子做益智游戏，培养孩子感情兴趣", "照看低龄儿童", "陪孩子度过欢乐时光", "其他，需要备注"],
        ["周末一起活动", "平常一起运动", "可以互相谈心"]];

        function initData() {
            var pro = document.getElementById("need");
            for (var i = 0; i < need.length; i++) {
                //创建option标签
                var op = document.createElement("option");
                op.value = i;
                op.innerText = need[i];
                pro.appendChild(op);
            }
        }
        function changeNeed(obj) {
            var work_arr = works[obj.value];
            var work = document.getElementById("work");
            work.options.length = 1;
            for (var i = 0; i < work_arr.length; i++) {
                var opt = document.createElement("option");
                opt.value = i;
                opt.innerText = work_arr[i];
                work.appendChild(opt);
            }
        }
    </script>






    <!--人数加减-->
    <script>

        var num_jia = document.getElementById("num-jia");
        var num_jian = document.getElementById("num-jian");
        var input_num = document.getElementById("input-num");

        num_jia.onclick = function () {

            input_num.value = parseInt(input_num.value) + 1;
        }

        num_jian.onclick = function () {

            if (input_num.value <= 0) {
                input_num.value = 0;
            } else {

                input_num.value = parseInt(input_num.value) - 1;
            }

        }





    </script>

    <script>
        $(document).ready(function () {
            $('.demo1').click(function () {
                swal({
                    title: "保存到草稿成功",
                    text: "返回继续编辑发布需求",
                    type: "success"
                });
            });
            $('.demo2').click(function () {
                swal({
                    title: "您成功的发布了一个需求",
                    text: "返回继续发布需求",
                    type: "success"
                });
            });
        });
    </script>

    
    
    <!-- layerDate plugin javascript -->
    <script src="../../js/service/laydate.js"></script>

    <!-- Sweet alert -->
    <script src="../../js/service/sweetalert.min.js"></script>


    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="../../plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="../../plugins/bootstrap/js/bootstrap.js"></script>

    <script src="../../plugins/bootstrap-date/js/distpicker.data.js"></script>
    <script src="../../plugins/bootstrap-date/js/distpicker.js"></script>
    <script src="../../plugins/bootstrap-date/js/main.js"></script>
</body>

</html>